<template>
  <el-row :gutter="40" class="">
    <div class="introduce" v-for="(item, index) in introduces" >
      <div >
        <div class="help-title">{{index}}. {{item.title}}</div>
        <div class="content">{{item.content}}</div>
        <div class="img-div" v-for="(img, index) in item.imgs">
          <img @click="linkByRouter(img.routerpath)" :src="require('@/assets/introduce/' + img.imgname + '.png')" width="100%" ></div>
      </div>
    </div>

  </el-row>
</template>

<script>

export default {
    data() {

      return {
        introduces: [
          {"title": "整体介绍",
            "content": "本系统是针对生产计划制作的排班系统，系统交互设计简洁明了，功能简洁，符合惯性思维工程学，坚持所见即所得的设计思想，力求低学习成本，快速上手。下面我们来看看具体怎么用",
            "imgs": []
          },
          {"title": "首页介绍(点图片可以进入体验)",
            "content": "首页有快速操作入口 ， 熟悉系统以后，可以从这里方便的进入主要功能页面",
            "imgs": [{"imgname":"1", "routerpath": "index"}]
          },
          {"title": "员工信息管理(点图片可以进入体验)",
            "content": "使用本系统第一步，需要先维护人员信息、组织架构等（小技巧：可以联系我们的客服协助设置哦！）",
            "imgs": [{"imgname":"2", "routerpath": "selfcom/user"}]
          },
          {"title": "配置排班班次(点图片可以进入体验)",
            "content": "通过班次来设计工作时间，让员工可以灵活的调整工作时间，同时又全球你的管理",
            "imgs": [{"imgname":"3", "routerpath": "bizconfig/schedefine"}]
          },
          {"title": "配置员工排班规则(点图片可以进入体验)",
            "content": "排班的时候一个一个点真的很麻烦，可以试试设置员工的排班规则，然后使用智能排班吧",
            "imgs": [{"imgname":"4", "routerpath": "bizconfig/schedulerule"}, {"imgname":"4-1", "routerpath": "biz/monthschedule"}]
          },
          {"title": "配置人员社保(点图片可以进入体验)",
            "content": "社保也是算工资重要的一环，要帮员工设计一个符合标准的社保哦！）",
            "imgs": [{"imgname":"5", "routerpath": "bizconfig/tenantsocialsecurity"}]
          },
          {"title": "配置人员工资计算公式(点图片可以进入体验)",
            "content": "工资的计算公式主要是由各个计算项的加减乘除构成的， 相当于在设计员工的薪资结构",
            "imgs": [{"imgname":"6", "routerpath": "bizconfig/salaryrule"}]
          },
          {"title": "工资计算(点图片可以进入体验)",
            "content": "接下来我们去试试算工资吧，只要点击每个员工后面的“计算”就能自动算工资啦， 还可以按一个部门为单位进行批量计算哦，新手引导就到这了，快去试试吧，现在去完成体验还能得到我们为您准备的超值大礼包（价值1000元抵用券）！",
            "imgs": [{"imgname":"7", "routerpath": "biz/monthsalary"}]
          },
        ]
      }
    },
  created() {
  },
  methods: {
    linkByRouter(routerPath) {
      this.$router.push(routerPath)
    }
  }
}
</script>

<style lang="scss" scoped>
.introduce {
  padding: 10px 25px;
}

.introduce .help-title {
  font-size: 16px;
}

.introduce .content {
  color: #999;
  font-size: 14px;
  padding: 1rem;
}

.introduce .img-div {
  padding: 1rem;
}

</style>
